$(function () {
    var $image = $('.cropper-box img')
    var options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }
    $image.cropper(options)


    //点击按钮选择图片
    $('#uploadImg').click(function () {
        $('#selectImg').click()
    })

    // 3、获取选中的文件的信息
    $('#selectImg').change(function (e) {
        // change事件触发条件：表单输入域内容发生变化时触发
        // 选中文件后触发该事件函数
        // 获取选中的文件信息
        var file = e.target.files[0]
        // 获取到文件信息后需要显示到左侧图片区域
        // URL.createObjectURL方法的作用：根据选中的文件生成一个预览URL地址
        var newImgURL = URL.createObjectURL(file)
        // 把地址更新到图片的src属性上即可
        $image.cropper('destroy')       // 销毁之前的裁剪区域
            .attr('src', newImgURL)   // 更新图片的路径
            .cropper(options)         // 重新生成一份新的裁剪区域
    })


    //点击确定按钮获取裁切图片上传给服务器
    $('#okbtn').click(function () {
        var dataURL = $image
            // 创建一个 Canvas 画布
            .cropper('getCroppedCanvas', {
                width: 100,
                height: 100
            })
            // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
            .toDataURL('image/png')
        $.ajax({
            type: 'post',
            url: 'my/update/avatar',
            data: {
                avatar: dataURL
            },
            success: function (res) {
                if (res.status === 0) {
                    //更新页面显示头像信息
                    // parent.window.loadUserInfo()
                    parent.$.loadUserInfo()
                }
            }
        })
    })

})